<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>

        /*
        在 CSS 里，left、top、right、bottom 这些偏移属性只有在元素的 position 不等于默认的 static
        （即设置了 relative、absolute、fixed 或 sticky）时才会生效。默认情况下，浏览器给所有元素都是 position: static，
        这时即便你写了 left:100px; top:0;，浏览器也会忽略它们。
        */
        div{
            width: 200px;
            height: 200px;
        }
        /* 定位的关键字 position left/right + top/bottom */
        /* 相对定位 相对的是原来的自己，表现是浮动的，但是原来的位置依然占领 relative */
.b1{
    background-color: lightblue;
    position: relative;
    left: 0px;
    top: 0px;
    transition: all 2s linear 0s;
}

.b2{
    background-color: lightcoral;
    position: relative;
    left: 100px;
    top: 0px;
}

.b1:hover{
    left: 100px;
    top: 100px;
}

.other{
    border: 3px solid orange;
}
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="other"></div>
</body>
</html>